<script setup lang="ts">
import { Medal, Search } from '@element-plus/icons-vue'
import { ref, onMounted } from 'vue'
import { yearList } from '@/views/customizedPage/dictionary'
// import { useRoute } from 'vue-router'
import { getCloudDataApi } from '@/api/cloudNetworkSecurity'
import { useRouter } from 'vue-router'

// const route = useRoute()
// console.log(route)

const loading = ref(false)

const total = ref<any>(0)
const tableList = ref<any>([])
const fromData = ref({
  date: '2024',
  latnId: '',
  userName: '',
  page: 1,
  rows: 20
})

// top30
const topData = ref<any>([])
const getCloudTopDataFn = async () => {
  const params = {
    sqlId: 'cloudGuard.getGrjfSum',
    sqlParam: JSON.stringify({
      orderScore: 'desc',
      // date: String(timeFormat(new Date()).YYYYMM
      date: String('2024'),
      userName: '',
      latnId: ''
    }),
    pagination: true,
    dbName: 'doris',
    debug: 0,
    page: 1,
    rows: 30
  }
  await getCloudDataApi(params).then((res: any) => {
    topData.value = res.rows
  })
}
const getCloudDataFn = async () => {
  const params = {
    sqlId: 'cloudGuard.getGrjfSum',
    sqlParam: JSON.stringify({
      // date: String(timeFormat(new Date()).YYYYMM
      date: String(fromData.value.date),
      userName: fromData.value.userName,
      latnId: fromData.value.latnId.length === 0 ? '' : fromData.value.latnId
    }),
    pagination: true,
    dbName: 'doris',
    debug: 0,
    page: fromData.value.page,
    rows: fromData.value.rows
  }
  await getCloudDataApi(params).then((res: any) => {
    tableList.value = res.rows
    total.value = res.total
  })
}

const treeData = ref<any>([])
// 获得组织关系树
const getTreeData = async () => {
  const params = {
    sqlId: 'cloudGuard.getLatnInfo',
    sqlParam: JSON.stringify({}),
    pagination: true,
    dbName: 'doris',
    debug: 0,
    page: 1,
    rows: 30
  }
  await getCloudDataApi(params).then((res: any) => {
    treeData.value = res.rows
  })
}

// 查询
const searchBtn = () => {
  // console.log(fromData.value)

  getCloudDataFn()
}

// 跳转路由
const router = useRouter()
const gotoPage = (info: any) => {
  // path: string
  router.push({
    path: `/YunWangAnQuan/BianGengCaoZuo/GeRenJiFen/Details`,
    query: {
      data: fromData.value.date,
      userName: info.user_name,
      userId: info.user_id
    }
    // name: 'GeRenJiFenDetails',
    // params: {
    //   userId: info.user_id
    // }
  })
}
// 详情
const detailsBtn = (row: any) => {
  gotoPage(row)
  // getTopInfp(row)
  // console.log('详情', row)
}

const handleSizeChange = (val: number) => {
  fromData.value.page = 1
  fromData.value.rows = val
  getCloudDataFn()
}

const handleCurrentChange = (val: number) => {
  fromData.value.page = val
  getCloudDataFn()
}

onMounted(() => {
  getCloudTopDataFn()
  getCloudDataFn()
  getTreeData()
})
</script>
<template>
  <div class="GeRenJiFenBox">
    <div class="rankBox">
      <h3 class="topBox">
        <svg-icon color="#f2b312" className="iconBox" iconName="icon-paiming"></svg-icon>
        <span>年度前30名</span>
      </h3>
      <div class="rankList" v-if="topData.length > 0">
        <el-scrollbar>
          <div class="rankItem" @click="detailsBtn(topData[0])">
            <svg-icon className="iconBox" iconName="icon-jinpai"></svg-icon>
            <div class="rankInfo">
              <span class="rankName">{{ topData[0].user_name }}</span>
              <span class="rankScore">{{ topData[0].total_score }}分</span>
            </div>
          </div>
          <div class="rankItem" @click="detailsBtn(topData[1])">
            <svg-icon className="iconBox" iconName="icon-yinpai"></svg-icon>
            <div class="rankInfo">
              <span class="rankName">{{ topData[1].user_name }}</span>
              <span class="rankScore">{{ topData[1].total_score }}分</span>
            </div>
          </div>
          <div class="rankItem" @click="detailsBtn(topData[2])">
            <svg-icon className="iconBox" iconName="icon-tongpai"></svg-icon>
            <div class="rankInfo">
              <span class="rankName">{{ topData[2].user_name }}</span>
              <span class="rankScore">{{ topData[2].total_score }}分</span>
            </div>
          </div>
          <div
            class="rankItem"
            v-for="i in topData.slice(3)"
            :key="i.user_id"
            @click="detailsBtn(topData[i])"
          >
            <el-icon class="iconBox" style="font-size: 20px; text-align: center"><Medal /></el-icon>
            <div class="rankInfo">
              <span class="rankName">{{ i.user_name }}</span>
              <span class="rankScore">{{ i.total_score }}分</span>
            </div>
          </div>
        </el-scrollbar>
      </div>
    </div>
    <div class="contentBox">
      <el-form :inline="true" :model="fromData" style="margin-top: 15px">
        <el-form-item label="年度：">
          <el-select v-model="fromData.date" placeholder="请选择年度" style="width: 100px">
            <el-option
              v-for="item in yearList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="组织关系树：">
          <el-select v-model="fromData.latnId" placeholder="请输入组织关系树" style="width: 180px">
            <el-option
              v-for="item in treeData"
              :key="item.user_id"
              :label="item.latn_name"
              :value="item.latn_id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="姓名：">
          <el-input v-model="fromData.userName" placeholder="请输入姓名" style="width: 160px" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" :icon="Search" @click="searchBtn">查询</el-button>
        </el-form-item>
      </el-form>

      <el-table
        class="TableBox"
        v-loading="loading"
        :data="tableList"
        stripe
        border
        style="width: 100%"
      >
        <el-table-column prop="user_id" label="账号" />
        <el-table-column prop="latn_name" label="组织关系" />
        <el-table-column prop="user_name" label="姓名" width="200" />
        <el-table-column prop="total_score" label="分值" width="120" />
        <el-table-column fixed="right" label="操作" width="100" align="center">
          <template #default="scope">
            <el-button text type="primary" @click="detailsBtn(scope.row)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="paginationBox"
        v-model:current-page="fromData.page"
        v-model:page-size="fromData.rows"
        :page-sizes="[10, 20, 30, 40]"
        size="default"
        :disabled="false"
        :background="true"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      >
      </el-pagination>
    </div>
  </div>
</template>
<style scoped>
.GeRenJiFenBox {
  width: 100%;
  height: calc(100vh - 192px);
  display: flex;
  justify-content: center;
  align-items: start;
  .rankBox {
    width: 300px;
    min-width: 300px;
    height: 100%;
    margin-right: 10px;
    .topBox {
      padding: 8px 20px;
      font-size: 22px;
      line-height: 30px;
      border-bottom: 1px solid var(--cnac-bgc1);
      border-right: 1px solid var(--cnac-bgc1);
      .iconBox {
        vertical-align: sub;
      }
      span {
        font-weight: 700;
        font-size: 18px;
        padding-left: 20px;
      }
    }
    .rankList {
      width: 100%;
      height: 100%;
      .rankItem {
        width: 100%;
        height: 40px;
        line-height: 40px;
        display: flex;
        align-self: center;
        justify-content: space-between;
        cursor: pointer;
        border-bottom: 1px solid var(--cnac-bgc1);
        border-right: 1px solid var(--cnac-bgc1);
        .iconBox {
          margin-top: 10px;
          padding: 0 15px;
          display: inline-block;
          width: 60px;
          height: 20px;
        }
        .rankInfo {
          display: inline-flex;
          flex: 1;
          span {
            font-size: 14px;
          }
          .rankName {
            flex: 1;
          }
          .rankScore {
            width: 50px;
            padding-right: 8px;
          }
        }
      }
      .rankItem:hover {
        color: #fff !important;
        background-color: var(--cnac-main);
      }
    }
  }
  .contentBox {
    flex: 1;
    height: 100%;
    padding: 8px;
    .TableBox {
      height: calc(100vh - 270px);
    }
    .paginationBox {
      bottom: 20px;
    }
  }
}
</style>
